<template>
  <div>
    <!-- PLC信息配置 -->

    <div class="column">
      <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
          <!-- 左侧的内容，左侧的内容，左侧的内容，左侧的内容 -->
          <div style="position: relative;">
            <el-card style="height: calc( 100vh - 85px); overflow: auto">
              <!-- 信息搜索框 -->
              <el-form v-model="queryObj" label-width="100px" size="large">
                <el-row>
                  <el-col :span="8" style="margin-right: 15px">
                    <el-form-item label="log：">
                      <el-input v-model.trim="queryObj.log" placeholder="请输入log" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8" style="margin-right: 15px">
                    <el-form-item label="时间：">
                      <el-date-picker v-model="timestart_end" style="width:100%" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy/MM/dd HH:mm:ss"
                        value-format="yyyy/MM/dd HH:mm:ss" @change="handleDataChanged" range-separator="至" :default-time="['00:00:00', '23:59:59']" />
                    </el-form-item>
                  </el-col>
                  <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />

                </el-row>
              </el-form>
              <!-- 调整状态按钮 -->
              <el-row style="margin-bottom: 10px">
                <div style="float: left" />
                <button @click="testclick">按钮</button>
                <div style="float: right">
                  <div style="font-size: 30px; display: inline-block; margin-right: 5px">
                    <a href="#">
                      <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor:pointer">
                        <el-dropdown trigger="click" :hide-on-click="false">
                          <span class="el-dropdown-link">
                            <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                          </span>
                          <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                            <el-dropdown-item><el-checkbox v-model="deleteCell.islog">任务编号</el-checkbox></el-dropdown-item>
                            <el-dropdown-item><el-checkbox v-model="deleteCell.iscreatedTime">容器编号</el-checkbox></el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-tooltip>
                    </a>
                  </div>
                  <!-- 右侧公用按钮功能组件 -->
                  <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr"
                    :headers-relations="headersRelations" @exportAllfn="exportAll" />
                </div>
              </el-row>

              <!-- 任务总表   v-if="queryObj.userName !== ''"-->
              <el-table v-loading="listLoading" :data="tableData" border :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" style="width: 100%;  margin-bottom: 10px;overflow:auto;">
                <el-table-column v-if="deleteCell.islog" prop="log" label="log" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span style="cursor: pointer" @click="DataDialogClick(scope.row.log)">{{scope.row.log}}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="deleteCell.iscreatedTime" prop="createdTime" label="createdTime" width="160">
                  <template slot-scope="scope">
                    <span>{{scope.row.createdTime | formatDate}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
            </el-card>
          </div>
        </div>
      </div>
      <div class="column-right">
        <!-- 右侧的内容，右侧的内容，右侧的内容，右侧的内容 -->
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <el-button style="float: right;" type="text" @click="dataDialogDataClose">关闭</el-button>
          <el-input type="textarea" v-model="dataDialogData" :rows="20" readonly>{{dataDialogData}}</el-input>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// name: "PlcConfig",
import { systemErrorLog } from "@/api/log";
import request from "../../utils/request";
export default {
  name: "LoginLog",
  data() {
    return {
      queryObj: {
        log: "",
        page: 0, // 第几页
        size: 0, // 每页条数
        startTime: "0001/1/1 0:00:00", // 开始日期
        endTime: "0001/1/1 0:00:00", // 结束日期
      },
      // 分页的数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      dataDialogData: "",
      // 页面loding效果
      listLoading: true,
      // 列位置是否显示
      deleteCell: {
        isuserName: true,
        islog: true,
        isloginIP: true,
        iscreatedTime: true,
      },
      // excel 数据的key 表头数据
      headersArr: ["log", "createdTime"],
      // 将表头转换成中文
      headersRelations: {
        log: "log",
        createdTime: "createdTime",
      },
    };
  },
  // 监视时间变化
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
  },
  mounted() {
    this.queryData();
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await systemErrorLog(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
    // 重置按钮
    resetQuery() {
      this.queryObj.loginIP = "";
      this.queryObj.userName = "";
      this.timestart_end = [];
    },
    // 展开内容到侧边
    DataDialogClick(data) {
      let columnright = document.querySelector(".column-right");
      let resizebar = document.querySelector(".resize-bar");
      columnright.style.display = "block";
      resizebar.style.width = "68vw";
      // this.DataDialog = true;
      this.dataDialogData = data;
      // console.log(data);
    },
    //关闭侧边内容
    dataDialogDataClose() {
      let columnright = document.querySelector(".column-right");
      let resizebar = document.querySelector(".resize-bar");
      columnright.style.display = "none";
      resizebar.style.width = "87vw";
    },
    // excel导出全部
    async exportAll() {
      const res2 = await systemErrorLog({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
    async testclick() {
      const res = await request({
        method: "get",
        url: "/Manage/Auth",
      });
      console.log(res);
    },
  },
};
</script>

<style scoped>
.column {
  overflow: hidden;
}
.column-left {
  /* height: 400px; */
  background-color: #fff;
  position: relative;
  float: left;
  height: calc(100vh - 84px);
  overflow: auto;
}
.column-right {
  display: none;
  height: 90vh;
  padding: 6px;
  background-color: #eee;
  box-sizing: border-box;
  overflow: hidden;
  /* height: calc( 100vh - 164px); overflow: auto */
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  /* padding: 16px; */
  overflow-x: hidden;
}
.resize-bar {
  width: 87vw;
  /* width: 68vw; */
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  opacity: 0;
  overflow: scroll;
}
/* 拖拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #eee;
  border-left: 1px solid #bbb;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
/* @supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    background: url(./resize.svg);
    background-size: 100% 100%;
  }
} */
</style>
